/**
 * Slide Component Style for tingle
 * @author gnosaij,changming
 *
 * Copyright 2014-2017, Tingle Team, Alinw.
 * All rights reserved.
 */

unless $prefix is defined
    $prefix = 't'

.{$prefix}-slide
  position relative
  -webkit-user-select none
  -webkit-touch-callout none
  -webkit-tap-highlight-color rgba(0, 0, 0, 0)
  overflow hidden

.{$prefix}-slide-view
  overflow hidden
  position relative
  top 0
  left 0
  -webkit-box-sizing content-box
  box-sizing content-box

.{$prefix}-slide-item
  /*不能在这里设置transition time 否则初始化的时候就有动画*/
  top 0
  left -10000px
  position absolute
  width 100%
  height 100%
  > div
    height 100%

// 卡片模式
// .{$prefix}-slide-card-mode
//   .{$prefix}-slide-item
//     border-radius 4px
//     overflow hidden
//     width 82%
//     margin-left 9%

// .{$prefix}-slide-img-contain .{$prefix}-slide-item
//   -webkit-background-size contain
//   background-size contain

// .{$prefix}-slide-img-cover .{$prefix}-slide-item
//   -webkit-background-size cover
//   background-size cover

.{$prefix}-slide-item
  &.ready
    left 0
  img
    -webkit-user-drag none
    height auto
    max-height 100%
    max-width 100%
    position absolute
    margin auto
    top 0
    right 0
    bottom 0
    left 0
    object-fit contain

.{$prefix}-slide-item-inner
  position relative
  > .{$prefix}-slide-item-title
    display none
    position absolute
    font-size 14px
    color #fff
    background-color rgba(0, 0, 0, .3)
    left 0
    bottom 0
    width 100%
    line-height 30px
    height 30px
    padding 0 16px
    & > div
      width 70%
      text-overflow ellipsis
      overflow hidden
      white-space nowrap

.{$prefix}-slide-show-title
  .{$prefix}-slide-item-inner
    > .{$prefix}-slide-item-title
      display block

@require './SlideNav'

// .{$prefix}-slide-next,
// .{$prefix}-slide-prev
//   position absolute
//   width 30px
//   height 30px
//   line-height 30px
//   -webkit-border-radius 15px
//   border-radius 15px
//   background-color rgba(0, 0, 0, 0.3)
//   top 75px
//   color #fff
//   z-index 2
//   text-align center
//   margin auto
//   cursor pointer

// .{$prefix}-slide-next
//   right 4px

// .{$prefix}-slide-prev
//   left 4px

/***** dotted indicator style *****/
// .{$prefix}-slide-title
//   font-size 14px
//   color #fff
//   background-color rgba(0, 0, 0, .3)
//   padding 6px
//   text-align left
//   pointer-events none
//   position absolute
//   bottom 30px
//   left 0
//   width 100%

// .{$prefix}-slide-status-dot
//   text-align center
//   height 30px
//   font-size 0
//   b
//     display inline-block
//     margin 11px 2px
//     width 8px
//     height 8px
//     border-radius 4px
//     background-color rgba(144, 144, 144, 0.8)
//     box-shadow inset 0 1px 1px 0 rgba(0, 0, 0, 0.5)
//     &.current
//       background-color #f44447
